<template>
  <div class="login-1">
    <van-nav-bar title="登录" left-arrow @click-left="onClickLeft" class="head">
    </van-nav-bar>
    <div class="logo-1">
      <img src="../assets/img/logo登录.png" alt="" />
    </div>
    <div class="form">
      <input type="text" placeholder="请输入手机号" v-model="phone" />
      <input type="password" placeholder="请输入密码" v-model="password" />
      <div class="checkcode">
        <input type="text" placeholder="请输入校验码" v-model="checkcode" />
        <div @click="refresh">
          <img :src="checkList.fileName" alt="" />
        </div>
      </div>
      <div class="password-1">
        <span>忘记密码？</span>
        <em @click="goRegister">现在注册</em>
      </div>
      <button class="butt" @click="gologin">登录</button>
      <div class="text" v-show="text">
        {{ text }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from "vue";
import { NavBar, Toast } from "vant";
import { useRouter } from "vue-router";

export default {
  components: {
    VanNavBar: NavBar,
  },
  setup() {
    let phone = ref(null);
    let password = ref(null);
    let checkcode = ref(null);
    let text = ref(null);
    const checkList = ref({});
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    const goRegister = () => {
      router.push("/register");
    };
    const gologin = () => {
      if (checkcode.value) {
        if (checkcode.value != checkList.value.verifyCode) {
          text.value = "校验码错误";
        } else {
          if (phone.value && password.value) {
            getLogin();
            // router.push("/");
          } else {
            text.value = "用户名或密码不能为空";
          }
        }
      } else {
        text.value = "请输入校验码";
      }
    };
    const refresh = () => {
      fetch(
        "https://api.apishop.net/common/verify/getSimpleVerifyImage?apiKey=ITNLNez3cd1c9ae83f67f2abdbe1eee271d598bad5f7203&codeType=1"
      ).then((rsp) =>
        rsp.json().then((res) => {
          checkList.value = res.result;
        })
      );
    };
    const getLogin = () => {
      fetch(`http://2107.wqdp.com.cn/users/login`, {
        method: "POST",
        body: JSON.stringify({
          phone: phone.value,
          password: password.value,
        }),
        headers: {
          "content-type": "application/json",
        },
      }).then((rsp) =>
        rsp.json().then((res) => {
          console.log(res);
          if (res.status == 0) {
            localStorage.setItem("token", res.token);
            Toast.success("登录成功");
            router.push("/");
          } else {
            text.value = res.msg;
          }
        })
      );
    };
    onMounted(async () => {
      const data = await fetch(
        "https://api.apishop.net/common/verify/getSimpleVerifyImage?apiKey=ITNLNez3cd1c9ae83f67f2abdbe1eee271d598bad5f7203&codeType=1"
      ).then((rsp) => rsp.json());
      checkList.value = data.result;
      console.log(checkList.value);
    });
    const texttime = () => {
      if (text.value.length > 0) {
        clearTimeout(timer1);
        const timer1 = setTimeout(() => {
          text.value = "";
        }, 5000);
      }
    };
    watch(text, texttime);
    return {
      onClickLeft,
      phone,
      password,
      gologin,
      checkcode,
      checkList,
      refresh,
      text,
      goRegister,
    };
  },
};
</script>

<style lang="less" scoped>
.head {
  font-weight: 900;
}
.login-1 {
  background-color: #fff;
  height: 667px;
  .logo-1 {
    width: 136px;
    height: 136px;
    border-radius: 50%;
    margin: 0 auto;
    border: 4px solid #f04a3a;
    margin-top: 27px;
    margin-bottom: 36px;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .form {
    text-align: center;
    input,
    .butt {
      width: 272px;
      height: 36px;
      background: #f0f0f0;
      border-radius: 18px;
      outline: none;
      padding: 0px 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFang;
      font-weight: 500;
      color: #909090;
      line-height: 36px;
      &:nth-child(1) {
        margin-bottom: 10px;
      }
    }
    .butt {
      background: #f04a3a;
      color: #fff;
    }
    .password-1 {
      width: 272px;
      height: 36px;
      font-size: 10px;
      font-family: PingFang;
      font-weight: 500;
      color: #202020;
      line-height: 36px;
      margin: 0 auto;
      text-align: left;
      > em {
        float: right;
        font-weight: normal;
      }
      span {
        text-align: left;
      }
    }
  }
  .checkcode {
    display: flex;
    width: 272px;
    margin: 10px auto;
    > input {
      width: 140px;
      margin-right: 30px;
    }
    > div {
      width: 100px;
      height: 40px;
      > img {
        width: 100%;
      }
    }
  }
}
.text {
  height: 30px;
  margin: auto;
  margin-top: 30px;
  color: red;
  font-size: 14px;
}
</style>
